<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="/css/cssDemo/cDemo1.css">
<!--  css样式表
css 指的是层叠样式表 描述了如何在屏幕上显示Html元素
css 节省了大量工作 同时控制多张网页的布局
外部样式表存储在css文件中 也称为级联样式表
css 语法 规则集 由选择器和声明块组成
  h1 选择器
  {color:red;font-size:14px} 声明  属性:值
  选择器指向需要设置的html元素 声明块包含一条或多条用分号分隔的声明
  多条声明都包含一个css属性名称和一个值 以冒号分隔
  多条css 声明用分号分隔 声明块使用花括号括起来
p {
  color: red;
  text-align: center;
}
p 是css中的选择器 指向要设置的样式的html元素 <p>
color 是属性  red 是属性值
css选择器用于查找 或者选取要设置样式的html元素
css选择器可以分为5类
  简单选择器 根据名称 id 类来选取元素
  组合选择器 根据它们之间的特定关系来选取元素
  伪类选择器 根据特定状态选取元素
  伪元素选择器  选取元素的一部分并设置其样式
  属性选择器   根据属性或属性值来选取元素

id 选择器 使用Html 元素的id属性来选择特定元素
元素的id在页面中是唯一的 因此id选择器用于选择一个唯一的元素
要选择具有id 的元素 请写一个# 后跟该元素的id
类 选择器 使用Html 元素的class属性来选择特定元素
要选择具有class 的元素 请写一个. 后跟该元素的class
要选择具有class 的元素 请写一个. 后跟该元素的class
html 元素可以引用多个类

通用选择器
* 选择器 选择所有元素

分组选择器 将一组元素放在一起进行分组 语法是选择器1,选择器2,选择器3...
使用逗号进行分隔每个选择器

3种使用css的方式
1.内部样式表
  在html页面的head标签中定义style元素中定义样式
2.行内样式表
3.外部样式表
  外部样式表在html页面的head标签中定义link元素中定义 href属性指定css文件的位置
  注意 不要在属性值和单位之间添加空格  如 margin: 10 px 正确的写法是 margin: 10px;

如果在外部样式表设置了h1样式,同时在内部样式表中设置了h1样式,
那么在内部样式表中设置的样式将覆盖外部样式表中的样式


层叠顺序
当某个html元素指定了多个样式时 css会按照以下顺序来决定最终的样式
1.行内样式 在html元素中
2.外部和内部样式表 在head部分
3.浏览器默认样式
因此 行内样式具有最高优先级 并且将覆盖外部和内部样式以及浏览器默认样式

颜色 RGB颜色

在css中可以使用下面公式将颜色指定为RGB值
reb(red,green,blue)
每个参数定义了0到255之间的颜色强度
黑色 rgb(0,0,0)
白色 rgb(255,255,255)

RGBA 颜色 值是具有alpha通道的RGB颜色值它指定了颜色的不透明度
rgba(red,green,blue,alpha)
alpha 值是介于0.0和1.0之间的浮点数
rgba(255,255,255,1) 纯白色
rgba(255,255,255,0) 纯黑色

HEX 值 十六进制颜色值
#rrggbb  rr红色 gg绿色 bb蓝色 是介于00 到 ff 之间十六进制值

Hsl 值 可以使用色相 饱和度 和 明度 来指定颜色
色相 hue 是0到360之间的度数 0 表示红色 180表示黄色 360表示红色
饱和度 saturation 是0到100之间的百分比 0表示灰色阴影 100表示全色
明度 lightness 是0到100之间的百分比 0表示黑色 100表示白色

使用 opacity 属性设置元素的不透明度
取值范围 0.0到1.0 值越低,越透明
使用 opacity 属性设置元素的不透明度时,其所有子元素都会继承相同的透明度
这可能会使得完全透明的元素内文本难以阅读

页面背景图像
background-image: url("/img/girl_hairpin_kimono_1068786_1920x1080.jpg");
使用背景图像时需要注意不会干绕文本的图像

背景图像的滚动 属性
固定背景图像
background-attachment: fixed;
背景图像滚动
background-attachment: scroll;

简写属性 在一条声明中设置背景属性
body {
  background: #ffffff url("tree.png") no-repeat right top;
}
在使用简写属性时，属性值的顺序为：

background-color
background-image
background-repeat
background-attachment
background-position
属性值之一缺失并不要紧，只要按照此顺序设置其他值即可。请注意，在上面的例子中，我们没有使用 background-attachment 属性，因为它没有值。

css 边框属性
css border 属性 允许指定元素的边框样式 宽度和颜色
  border-width: 25px 10px 4px 35px; /* 上边框 25px，右边框 10px，下边框 4px，左边框 35px */

CSS 边框颜色
border-color 属性用于设置四个边框的颜色。

可以通过以下方式设置颜色：

name - 指定颜色名，比如 "red"
HEX - 指定十六进制值，比如 "#ff0000"
RGB - 指定 RGB 值，比如 "rgb(255,0,0)"
HSL - 指定 HSL 值，比如 "hsl(0, 100%, 50%)"
transparent
注释：如果未设置 border-color，则它将继承元素的颜色。
  border-color: red green blue yellow; /* 上红、右绿、下蓝、左黄 */

它的工作原理是这样的：
如果 border-style 属性设置四个值：

border-style: dotted solid double dashed;
上边框是虚线
右边框是实线
下边框是双线
左边框是虚线

border-style: dotted solid double;
上边框是虚线
右和左边框是实线
下边框是双线
如果 border-style 属性设置两个值：

border-style: dotted solid;
上和下边框是虚线
右和左边框是实线
如果 border-style 属性设置一个值：

border-style: dotted;
四条边均为虚线

CSS Border - 简写属性
就像您在上一章中所见，处理边框时要考虑许多属性。

为了缩减代码，也可以在一个属性中指定所有单独的边框属性。

border 属性是以下各个边框属性的简写属性：

border-width
border-style（必需）
border-color
实例
p {
  border: 5px solid red;
}
border-radius 属性用于向元素添加圆角边框：



-->
</head>
<body>
<h1>验证css</h1>
<h2 id="h2" style="color: bisque;text-align: left;">验证标题!</h2>
<p style="background-color: DodgerBlue;">背景色</p>
<p style="color: chartreuse">文本颜色!</p>
<h1 style="border: 2px solid tomato;">边框颜色</h1>
<p>验证段落!</p>
<div id="para1">这是演示id选择器</div>
<div class="para2">这是演示类选择器</div>
<div id="zu1">这是演示通用选择器</div>
<div id="zu2">这是演示通用选择器</div>
<div id="zu3">这是演示通用选择器</div>
<div id ="bgImg">验证背景图像</div>
<div id="bgImg2">验证背景图像</div>
<!--演示边框-->
<div id="bk">
  <p>THIS IS A DIV</p>
</div>
<p id="p1">边框宽度</p>
<p id="p2">边框宽度</p>
<p id="p3">边框宽度</p>
<p id="p4">边框宽度</p>

</body>
</html>
